<template>
  <div id="meetingroom_container" style="height: 98%">
    <el-card>
      <div class="searchDiv">
        <div class="searchDivLeft">
          会社名称:
          <el-select v-model="Search.searchbean.groupEnterpriseGuid" placeholder="" class="cpnSelect">
            <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select
          >&nbsp; 会議室名称: <el-input v-model="Search.searchbean.mrName" placeholder=""></el-input>&nbsp;
          <el-button type="primary" v-preventReClick icon="el-icon-search" @click="SearchMeetRoom()">検索</el-button>
        </div>

        <div class="searchDivRight">
          <el-button type="primary" v-preventReClick icon="el-icon-plus" @click="dialogFormVisible = true">新規</el-button>
          <el-button type="warning" v-preventReClick icon="el-icon-edit" @click="ReviseMeetRoom()">修正</el-button>
          <el-button type="danger" v-preventReClick icon="el-icon-delete" @click="deleteMeetRoom()">削除</el-button>
          <el-dialog title="会議室新增" v-model="dialogFormVisible" @close="resetForm('meetRoom')">
            <el-form :model="meetRoom" :rules="rules" ref="meetRoom">
              <el-form-item label="会社名称" prop="groupEnterpriseGuid" :label-width="formLabelWidth">
                <el-select v-model="meetRoom.groupEnterpriseGuid" placeholder="会社を選択してください" class="dialog_detail">
                  <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="会議室名称" prop="mrName" :label-width="formLabelWidth">
                <el-input maxlength="50" v-model.trim="meetRoom.mrName" autocomplete="off" placeholder="会議室名称をご入力してください" class="dialog_detail"></el-input>
              </el-form-item>
              <el-form-item label="会議室規模(利用人数)" prop="mrNo" :label-width="formLabelWidth">
                <el-input maxlength="10" v-model="meetRoom.mrNo" autocomplete="off" placeholder="利用人数をご入力してください" class="dialog_detail"></el-input>
              </el-form-item>
              <el-form-item label="会議室設備" prop="mrEquipment" :label-width="formLabelWidth">
                <el-input maxlength="200" v-model="meetRoom.mrEquipment" type="textarea" autosize autocomplete="off" placeholder="" class="dialog_detail"></el-input>
              </el-form-item>
              <el-form-item label="会議室電話番号" prop="mrTel" :label-width="formLabelWidth">
                <el-input maxlength="20" v-model="meetRoom.mrTel" autocomplete="off" placeholder="電話番号をご入力してください" class="dialog_detail"></el-input>
              </el-form-item>
              <el-form-item label="備考" prop="mrRemark" :label-width="formLabelWidth">
                <el-input maxlength="200" v-model="meetRoom.mrRemark" type="textarea" autosize autocomplete="off" placeholder="" class="dialog_detail"></el-input>
              </el-form-item>
              <el-button type="primary" icon="el-icon-circle-check" v-preventReClick @click="submitMeet()" class="save">保存 </el-button>
            </el-form>
          </el-dialog>

          <el-dialog title="会議室修正" v-model="dialogFormVisible1" @close="resetForm('update')">
            <el-form :model="update" :rules="rules" ref="update">
              <el-form-item label="会社名称" prop="groupEnterpriseGuidChange" :label-width="formLabelWidth">
                <el-select v-model="update.groupEnterpriseGuid" placeholder="会社を選択してください" class="dialog_detail">
                  <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="会議室名称" prop="mrName" :label-width="formLabelWidth">
                <el-input maxlength="50" v-model.trim="update.mrName" autocomplete="off" placeholder="会議室名称をご入力してください" class="dialog_detail"></el-input>
              </el-form-item>
              <el-form-item label="会議室規模(利用人数)" prop="mrNo" :label-width="formLabelWidth">
                <el-input maxlength="10" v-model="update.mrNo" autocomplete="off" placeholder="利用人数をご入力してください" class="dialog_detail" length></el-input>
              </el-form-item>
              <el-form-item label="会議室設備" prop="mrEquipment" :label-width="formLabelWidth">
                <el-input maxlength="200" v-model="update.mrEquipment" type="textarea" autosize autocomplete="off" placeholder="" class="dialog_detail"></el-input>
              </el-form-item>
              <el-form-item label="会議室電話番号" prop="mrTel" :label-width="formLabelWidth">
                <el-input maxlength="20" v-model="update.mrTel" autocomplete="off" placeholder="電話番号をご入力してください" class="dialog_detail"></el-input>
              </el-form-item>
              <el-form-item label="備考" prop="mrRemark" :label-width="formLabelWidth">
                <el-input maxlength="200" v-model="update.mrRemark" type="textarea" autosize autocomplete="off" placeholder="" class="dialog_detail"></el-input>
              </el-form-item>
              <el-button type="primary" icon="el-icon-circle-check" v-preventReClick @click="updateMeetRoom()" class="save">保存 </el-button>
            </el-form>
          </el-dialog>
        </div>
      </div>
      <el-table :data="Searchlist" border style="width: 100%" :header-cell-style="{ background: '#f2f2f2', color: '#606266' }" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="mrName" label="会議室名称"> </el-table-column>
        <el-table-column prop="mrNo" label="会議室規模"> </el-table-column>
        <el-table-column prop="mrEquipment" label="会議室設備"> </el-table-column>
        <el-table-column prop="mrTel" label="会議室電話番号"> </el-table-column>
        <el-table-column prop="mrRemark" label="備考"> </el-table-column>
      </el-table>
      <div class="divider_pagination">
        <!-- <el-divider></el-divider> -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="Search.indexPage"
          :page-size="Search.pageSize"
          layout="total, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      Search: {
        indexPage: 1,
        pageSize: 8,
        searchbean: {
          groupEnterpriseGuid: '',
          mrName: ''
        }
      },
      Searchlist: [],
      total: 0,
      multipleSelection: [],
      options1: [
        {
          value: '',
          label: '全部'
        }
      ],
      options2: [],
      value1: '',
      dialogFormVisible: false,
      dialogFormVisible1: false,
      meetRoom: {
        delflg: '1',
        groupEnterpriseGuid: '',
        mrEquipment: '',
        mrName: '',
        mrNo: '',
        mrRemark: '',
        mrTel: ''
      },
      // number updateNo : Number(update.mrNo),
      formLabelWidth: '170px',
      rules: {
        groupEnterpriseGuid: [{ required: true, message: '会社を選択してください', trigger: 'blur' }],
        mrName: [{ required: true, message: '会議室名称をご入力してください', trigger: 'blur' }],
        mrNo: [
          { required: true, message: '利用人数をご入力してください', trigger: 'blur' },
          { pattern: /^[0-9]*$/, message: '数字をご入力してください', trigger: 'blur' }
        ]
      },
      // 修正
      update: {
        mrEquipment: '',
        mrName: '',
        mrNo: '',
        mrRemark: '',
        mrTel: '',
        groupEnterpriseGuid: '',
        mrId: ''
      },
      // 削除
      delete: {
        mrids: []
      }
    }
  },
  created() {
    this.Searchid()
  },
  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      console.log(this.multipleSelection)
    },
    // 监听 pagesize 改变的事件 ページサイズ変更イベントを聞く
    handleSizeChange(newSize) {
      console.log(newSize)
      this.Search.pageSize = newSize
      this.SearchMeetRoom()
    },
    // 监听 页码值 改变的事件 ページ番号値変更イベントの監視
    handleCurrentChange(newPage) {
      console.log(newPage)
      this.Search.indexPage = newPage
      this.SearchMeetRoom()
    },
    // 检索企业id 企業idを検索する
    Searchid() {
      function id(value, label) {
        this.value = value
        this.label = label
      }
      this.axios
        .post('/role/selectAllEnterprise')
        .then((res) => {
          console.log(res)
          this.SearchMeetRoom()
          res.data.data.forEach((item) => {
            this.options1.push(new id(item.groupEnterpriseGuid, item.enterpriseName))
            this.options2.push(new id(item.groupEnterpriseGuid, item.enterpriseName))
          })
          console.log(this.options2)
        })
        .catch((error) => {
          console.log(error)
        })
    },
    // 检索
    SearchMeetRoom() {
      console.log(this.Search)
      this.axios
        .post('/meetingroom/select/list', this.Search)
        .then((res) => {
          this.Searchlist = res.data.data.list
          this.total = res.data.data.total
          console.log(this.Searchlist)
        })
        .catch((error) => {
          console.log(error)
        })
    },
    // 新規
    submitMeet() {
      this.$refs.meetRoom.validate((valid) => {
        console.log(this.meetRoom)
        if (valid) {
          console.log(this.meetRoom)
          this.axios
            .post('/meetingroom/insert', this.meetRoom)
            .then((res) => {
              console.log(res)
              if (res.data.success) {
                this.$message.success('レコードが正常に登録しました。')
                this.meetRoom.groupEnterpriseGuid = ''
              } else {
                return this.$message.error(res.data.msg)
              }
              this.SearchMeetRoom()
              this.dialogFormVisible = false
            })
            .catch((error) => {
              console.log(error)
            })
        }
      })
    },
    // 修正
    ReviseMeetRoom() {
      if (this.multipleSelection.length !== 1) {
        return this.$message({
          showClose: true,
          message: this.$getMsg('W0001'),
          type: 'warning'
        })
      }
      this.dialogFormVisible1 = true
      this.update.mrEquipment = this.multipleSelection[0].mrEquipment
      this.update.mrName = this.multipleSelection[0].mrName
      this.update.mrNo = this.multipleSelection[0].mrNo
      this.update.mrRemark = this.multipleSelection[0].mrRemark
      this.update.mrTel = this.multipleSelection[0].mrTel
      this.update.groupEnterpriseGuid = this.multipleSelection[0].groupEnterpriseGuid
      this.update.mrId = this.multipleSelection[0].mrId
    },
    //修正
    updateMeetRoom() {
      this.$refs.update.validate((valid) => {
        if (valid) {
          this.axios
            .put('/meetingroom/update', this.update)
            .then((res) => {
              console.log(res)
              if (res.data.success === 0) {
                return this.$message.error(res.data.msg)
              }
              this.$message.success('レコードが正常に修正しました。')
              this.SearchMeetRoom()
              this.dialogFormVisible1 = false
            })
            .catch((error) => {
              console.log(error)
            })
        }
      })
    },
    // 削除
    deleteMeetRoom() {
      this.delete.mrids = []
      if (this.multipleSelection.length === 0) {
        return this.$message({
          showClose: true,
          message: this.$getMsg('W0002'),
          type: 'warning'
        })
      }
      console.log(JSON.stringify(this.multipleSelection))
      this.multipleSelection.forEach((item) => {
        this.delete.mrids.push(item.mrId)
      })
      this.$confirm(this.$getMsg('I0004'), {
        cancelButtonText: 'キャンセル',
        confirmButtonText: '確認',
        type: 'warning'
      }).then(
        () => {
          this.axios
            .delete('/meetingroom/delete', { data: this.delete })
            .then((res) => {
              this.$message.success(this.$getMsg('I0003'))
              this.SearchMeetRoom()
            })
            .catch((error) => {
              console.log(error)
            })
        },
        (res) => {
          console.log(res)
        }
      )
    }
  }
}
</script>

<style scoped>
.el-divider {
  position: absolute;
  bottom: 75px;
  width: 1030px;
}

.el-input {
  width: 105px;
}

.dialog_detail {
  width: 380px;
}

.dialog_detail1 {
  width: 160px !important;
}
.save {
  position: relative;
  left: 310px;
  bottom: 0px;
}

/* 验证规则错误后的小字样式
 ルールミスを検証した後の小さな文字パターン*/
:deep(.el-form-item__error) {
  width: 100%;
}
:deep(.el-form-item__label) {
  width: 205px !important;
}
</style>
